<template>
  <div>
    <el-button @click="open">打开</el-button>
    <el-dialog v-model="dialogData.visible" :show-close="false" width="800" style="border-radius: 12px">
      <template #header="{ close, titleId, titleClass }">
        <div class="custom-header">
          <div class="header-title">
            <div class="header-name" :id="titleId" :class="titleClass">{{ dialogData.name }}</div>
          </div>
          <div class="header-close" @click="close"><Close /></div>
        </div>
      </template>
      <template #default>
        <div v-infinite-scroll="load" class="infinite-list hideScrollbar" style="height: 500px; overflow: auto">
          <div v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</div>
          <p v-if="dialogData.loading" style="text-align: center">加载中...</p>
          <p v-if="dialogData.noMore" style="text-align: center">暂无更多</p>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogData.visible = false">取消</el-button>
          <el-button type="primary" @click="dialogData.visible = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

const dialogData = reactive({
  visible: false,
  name: "弹出框",
  loading: false,
  noMore: false,
  disabled: false
});
const count = ref(0);
const load = () => {
  dialogData.loading = true;
  if (count.value >= 50) {
    dialogData.noMore = true;
    dialogData.loading = false;
    dialogData.disabled = true;
    return;
  }
  count.value += 2;
};
const open = () => {
  dialogData.visible = true;
};
const close = () => {
  dialogData.visible = false;
};
</script>

<style lang="scss" scoped>
.custom-header {
  display: flex;
  justify-content: space-between;
  .header-title {
    display: flex;
    align-items: center;
    .header-name {
      font-size: 20px;
      font-weight: 600;
      color: #272b34;
    }
  }
  .header-close {
    width: 24px;
    height: 24px;
    color: #6f7686;
    cursor: pointer;
  }
}

.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
  .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
  }
  & + .list-item {
    margin-top: 10px;
  }
}
</style>
